<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条测试</title>
    
</head>
<body>

<input type="file" id="fileupload">
<input type="button" value="上传" id="upload" onclick="upload();">
<div style="background: #848484;width: 100px;height: 10px;top: 5px;">
    <div id="progressNumber" style="background: #428bca;height: 10px;width:0px;z-index: 999">

    </div>
    <span id="percent">0%</span>
</div>

</body>

<script>
    var file=null;
    var input=document.getElementById("fileupload");
    input.addEventListener('change',readeFile,false);
    
    function readeFile() {
        file=this.files[0];
        
    }
    function upload() {

        var xhr=new XMLHttpRequest();
        var fd=new FormData();
        fd.append("file",file);
//        监听事件
        xhr.upload.addEventListener("progress",uploadProgress,false);

//        发送文件
        xhr.open("POST","uploadservlet",true);
//        xhr.setRequestHeader("Content-type","multipart/form-data");
        xhr.send(fd);
        



        
    }
    
    function uploadProgress(evt) {
        debugger
        if(evt.lengthComputable){
//            evt.loaded 上传文件的大小 evt.total 文件的总大小
            var percentComplete=(evt.loaded)*100/evt.total;
//            加载进度条同事显示信息
            document.getElementById("percent").innerHTML=Math.round(percentComplete)+'%';
            document.getElementById("progressNumber").style.width=percentComplete+'%';
        }
        
    }

</script>
</html>